const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const webpack = require("webpack");
// css 压缩
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
  entry: path.resolve(__dirname, "src/index.js"),
  // 设置模块
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
            // 引入图片作用
            // options: {
            //     publicPath: “./”
            // }
          },
          "css-loader"
        ]
      },
      {
        test: /\.(png|svg|gif|jpg|jpeg)$/i,
        type: "asset/resource"
      },
      {
        test: /\.less$/i,
        use: ["style-loader", "css-loader", "less-loader"]
      },
      {
        test: /\.vue$/,
        use: ["vue-loader"]
      },
      {
        test: /\.jsx$/,
        loader: "babel-loader"
      },
      // eslint 校验
      {
        enforce: "pre",
        test: /\.(js|vue)$/,
        use: ["eslint-loader"],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src/index.html"),
      filename: "index.html",
      title: "webpack-vue-demo"
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].[contenthash:8].css",
      chunkFilename: "css/[id].[contenthash].css"
    }),
    new VueLoaderPlugin()
    // 配置样式eslint插件
    // new StyleLintPlugin({
    //   files: ["**/*.{vue,htm,html,css,sss,less,scss,sass}"]
    // })
  ],
  optimization: {
    minimizer: [new CssMinimizerPlugin()]
  }
};
